//
//  HHBackgroundAndOverlay.swift
//  HHSwiftuiPractice
//
//  Created by YL-Hong on 2023/9/27.
//SwiftUI中常用的一种覆盖层是overlay修饰符。overlay修饰符允许你在一个视图上添加一个或多个额外的视图，这些额外的视图会在原始视图之上进行绘制。这在需要在视图上添加标签、按钮、图标或其他内容时非常有用

// ZStack 堆叠布局

import SwiftUI

struct HHBackgroundAndOverlay: View {
    var body: some View {
        
        VStack{
            //使用 ZStack 创建视图层次结构
            ZStack{
                
                Text("Hello ")
                    .foregroundColor(Color.white)
                    .font(.title)
                    .padding()
                    .background(Color.black)
                    .opacity(0.7)
                    .cornerRadius(10)
                
                Image(systemName: "star.fill")
                    .foregroundColor(Color.yellow)
                    .font(.largeTitle)
                
                
            }.frame(width: 200, height: 200)
                .background(.blue)
            
            
            // Background && overlay 覆盖层
            Rectangle()
                .fill(Color.orange)
                .frame(width: 200,height: 200)
                .overlay(
                    Color.red
                        .frame(width: 100,height: 100)
                )
                .frame(width: 300, height: 300)
                .background(
                    LinearGradient(colors: [.blue,.green], startPoint: .topLeading, endPoint: .bottomTrailing)
                )
                
            
        }
        
    }
}

struct HHBackgroundAndOverlay_Previews: PreviewProvider {
    static var previews: some View {
        HHBackgroundAndOverlay()
    }
}
